<template>
  <!-- 用户审核页 -->
  <div class="permission-users-container">
    <div style="background: #ffffff;">
      <Form ref="selectUsers" :model="selectUsers" :label-width="80">
        <Row style="padding-top:10px;margin-left:5px">
          <Col span="3">
            <FormItem label="用户名" prop="username">
              <Row>
                <Col span="24">
                  <Input v-model="selectUsers.username" type="text" placeholder="请输入用户名称" />
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="3">
            <FormItem label="角色" prop="role">
              <Row>
                <Col span="24">
                  <Input v-model="selectUsers.role" type="text" placeholder="请输入角色名称" />
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="3">
            <FormItem label="在线状态" prop="onlineStatus">
              <Row>
                <Col span="24">
                  <Select v-model="selectUsers.onlineStatus">
                    <Option value="null">所有状态</Option>
                    <Option value="0">在线</Option>
                    <Option value="1">离线</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="3">
            <FormItem label="使用状态" prop="userStatus">
              <Row>
                <Col span="24">
                  <Select v-model="selectUsers.useStatus">
                    <Option value="null">所有状态</Option>
                    <Option value="0">启用</Option>
                    <Option value="1">停用</Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="注册时间" prop="">
              <Row>
                <Col span="10">
                  <DatePicker v-model="startTime" type="date" placeholder="开始日期" @on-change="startTimeVal" />
                </Col>
                <Col style="margin-left:10px" :span="2">
                  —
                </Col>
                <Col span="10">
                  <DatePicker v-model="endTime" type="date" placeholder="结束日期" @on-change="endTimeVal" />
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="1">
            <Button type="primary" style="z-index:999" @click="handleSubmit()">查询</Button>
          </Col>
          <Col span="1">
            <Button type="primary" @click="resetSearch()">重置</Button>
          </Col>
        </Row>
      </Form>
      <Row style="padding-bottom:30px;margin-left:30px">
        <Col span="2">
          <el-button type="primary" style="" icon="el-icon-circle-plus-outline" size="small" @click="addUser()">新增</el-button>
        </Col>
        <Col span="2">
          <el-button type="primary" icon="el-icon-download" class="updataButton" size="small" @click="downloadUser()">下载</el-button>
        </Col>
      </Row>
    </div>
    <div style="height:20px"></div>
    <div style="background:white;padding:10px">
      <Table stripe :columns="columns" :data="verifyData">
        <template slot="action" slot-scope="{ row, index }">
          <span>
            <Button type="primary" size="small" style="margin-right: 5px" @click="showVenify(row, index)">编辑</Button>
            <Button type="error" size="small" style="margin-right: 5px" @click="deleteDate(row)">删除</Button>
          </span>
        </template>
      </Table>
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-size="pageSize"
          :current-page.sync="pageNum"
          :total="userCount"
          @current-change="changepageNum"
          @size-change="changePageSize"
        />
      </el-row>
    </div>
    <!-- 申请用户详细信息弹框 -->
    <Modal
      v-model="userDialog"
      title="用户详细信息"
      :width="560"
      :height="600"
      :closable="false"
      :mask-closable="false"
    >
      <Form ref="approveForm" :model="approveForm" :label-width="160" style="width:400px" :rules="approveRules">
        <FormItem label="角色">
          <el-select v-model="approveForm.role" :disabled="isEdit" placeholder="选择角色" @change="getCompanyList">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </FormItem>
        <FormItem label="用户名" prop="username">
          <Input v-model="approveForm.username" type="text" :disabled="isEdit" placeholder="请输入用户名" />
        </FormItem>
        <FormItem prop="email" label="邮箱">
          <Input v-model="approveForm.email" type="text" :disabled="isEdit" placeholder="请输入邮箱" />
        </FormItem>
        <FormItem prop="password" label="密码">
          <Input v-model="approveForm.password" type="password" placeholder="请输入密码" />
        </FormItem>
        <FormItem prop="checkPass" label="密码确认">
          <Input v-model="approveForm.checkPass" type="password" placeholder="请确认密码" />
        </FormItem>
        <FormItem prop="name" label="姓名">
          <Input v-model="approveForm.name" type="text" placeholder="请输入姓名" />
        </FormItem>
        <FormItem prop="phone" label="手机号">
          <Input v-model="approveForm.phone" type="text" placeholder="请输入手机号" />
        </FormItem>
        <FormItem v-if="approveForm.role=='3'" prop="employer"  label="单位">
          <Input v-model="approveForm.employer" type="text" :disabled="isEdit" placeholder="请输入单位" />
        </FormItem>
        <FormItem v-if="approveForm.role!='3'"  label="单位" prop="employer">
          <el-select v-model="approveForm.employer" :disabled="isEdit" :popper-append-to-body="false" style="width:100%" filterable placeholder="请选择用人单位">
            <el-option
              v-for="item in employerOptions"
              :key="item.key"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </FormItem>
        <FormItem v-show="isEdit==true" label="账号使用状态">
          <RadioGroup v-model="approveForm.useStatus">
            <Radio v-for="item in useStatusList" :key="item.value" :label="item.value">
              <span>{{ item.label }}</span>
            </Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleReset()">取消</Button>
        <Button type="primary" @click="approveConfirm()">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getAllRole, getUserList, userUpdate, registUser, userDelete, getCompanys, tempExport,getUserInfo } from '@/api/user'
export default {
  components: {},
  data() {
    /**
     * @description: 参数校验
     * @description: 手机号
     * @return {*}
     */
    const validatorPhone = function(phone, value, callback) {
      const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
      if (value === '') {
        callback()
      } else if (!reg.test(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    /**
     * @description: 参数校验
     * @description: 用户名
     * @return {*}
     */
    const validateName = (rule, value, callback) => {
      const reg = /^[\w\d]+$/u
      if (value.trim() === '') {
        return callback(new Error('用户名不能为空！'))
      } else if (!reg.test(value)) {
        return callback(new Error('只能数字，字母，下划线!'))
      } else {
        callback()
      }
    }
    /**
     * @description: 参数校验
     * @description: 邮箱
     * @return {*}
     */
    const checkEmail = (rule, value, callback) => {
      var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
      if (value.trim() === '') {
        return callback(new Error('企业邮箱不能为空!'))
      } else if (!reg.test(value)) {
        return callback(new Error('请输入正确的企业邮箱!'))
      } else {
        callback()
      }
    }
    /**
     * @description: 注册校验
     * @description: 密码
     * @return {*}
     */
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空!'))
      } else {
        if (this.approveForm.checkPass !== '') {
          // 对第二个密码框单独验证
          this.$refs.approveForm.validateField('checkPass')
        }
        callback()
      }
    }
    /**
     * @description: 注册校验
     * @description: 密码确认
     * @return {*}
     */
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('确认密码不能为空!'))
      } else if (value !== this.approveForm.password) {
        callback(new Error('两次密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isEdit: false, // 编辑
      uploadData: false,
      fileList: [],
      formData: new FormData(),
      erroeFileName: '',
      error: false,
      columns:
         [{
           title: '序号',
           key: 'index',
           width: '80'
         },
         {
           title: '用户名',
           key: 'username'
         },
         {
           title: '姓名',
           key: 'name'
         },
         {
           title: '角色',
           key: 'role'

         },
         {
           title: '单位',
           key: 'company'
         },
         {
           title: '手机号',
           key: 'phonenum'

         },
         {
           title: '邮箱地址',
           key: 'email',
         },
         {
           title: '创建时间',
           key: 'createTime',
           width: '180'
         },
         {
           title: '更新时间',
           key: 'updateTime',
           width: '180'
         },
         {
           title: '在线状态',
           width: '100',
           key: 'online',
           render: (h, params) => {
             if (params.row.online === '在线') {
               return h('span', {
                 'style': {
                   'color': 'rgba(109, 212, 0, 1)'
                 }
               }, '• ' + params.row.online)
             } else {
               return h('span', {
                 'style': {
                   'color': 'rgba(232, 82, 91, 1)'
                 }
               }, '• ' + params.row.online)
             }
           }
         },
         {
           title: '使用状态',
           width: '100',
           key: 'userStatus',
           render: (h, params) => {
             if (params.row.userStatus === '启用') {
               return h('span', {
                 'style': {
                   'color': 'rgba(109, 212, 0, 1)'
                 }
               }, '• ' + params.row.userStatus)
             } else {
               return h('span', {
                 'style': {
                   'color': 'rgba(232, 82, 91, 1)'
                 }
               }, '• ' + params.row.userStatus)
             }
           }

         },
         {
           title: '操作',
           slot: 'action',
           width: 150,
           align: 'center'
         }
         ],
      roleOptions: [], // 角色列表
      verifyData: [], // 表格数据
      useStatusList: [{ // 用户状态
        value: '0',
        label: '启用'
      },
      {
        value: '1',
        label: '停用'
      }],
      pageNum: 1, // 当前页
      pageSize: 10, // 每一页数据
      userCount: 0, // 总数
      employerOptions: [],
      approveForm: {
        username: '', // 用户名
        name: '', // 姓名
        password: '', // 密码
        checkPass: '', // 密码确认
        email: '', // 邮箱
        phone: '', // 电话
        employer: '', // 单位
        role: '', // 角色
        // useTime: '30', // 使用时间
        useStatus: '0'// 状态
      },
      userDialog: false,
      selectUsers: {
        username: '', // 用户名
        role: '', // 角色
        useStatus: 'null', // 使用状态
        onlineStatus: 'null'// 在线状态
      },
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      rowIndex: '',
      approveRules: { // 校验
        username: [
          { required: true, validator: validateName, trigger: 'blur' },
          { type: 'string', max: 20, message: '用户名最多20个字符！', trigger: 'blur' }
        ],
        name: [
          { required: false, trigger: 'blur', message: '姓名必填！' },
          { type: 'string', max: 20, message: '姓名最多20个字符！', trigger: 'blur' }
        ],
        phone: [
          { required: false, validator: validatorPhone, trigger: 'blur', type: 'number' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入6至16位密码' },
          { type: 'string', min: 6, max: 16, message: '请输入6至16位密码', trigger: 'blur' }
        ],
        checkPass: [// 密码确认
          { required: true, validator: validatePassCheck, trigger: 'blur' },
          { type: 'string', min: 6, max: 16, message: '请输入6至16位密码', trigger: 'blur' }
        ],
        email: [
          { required: true, validator: checkEmail, trigger: 'blur' },
          { type: 'string', max: 50, message: '邮箱最多50个字符！', trigger: 'blur' }
        ],
        employer: [// 验证码
          { required: true, message: '用人单位不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getVerify()
    this.getCompanyList()
  },
  methods: {
    /**
     * @description: 获取所有单位
     * @description: 进入页面触发
     * @return {*}
     */
    getCompanyList() {
      getUserInfo().then(res => {
        if (res.code === 200) {
          let userId = res.data.user.id// 加载用户
          this.getRoleList(userId)
          getCompanys({ id: userId }).then(res => {
            if (res.code === 200) {
              this.employerOptions = res.data
            }
          })
        }
      })
    },
    /**
     * @description: 获取角色列表
     * @description: 一进来就触发
     * @return {*}
     */
    getRoleList(userId) {
      if(userId != '1'){
        this.roleOptions = [
          {
            "label": "普通用户",
            "value": "2"
        },
        ]
      } else  {
          getAllRole().then(res => {
          // res.code === 200正常
          if (res.code === 200) {
            this.roleOptions = res.data
            for (let i = 0; i < this.roleOptions.length; i++) {
              if (this.roleOptions[i].value === '1') {
                this.roleOptions.splice(i, 1)
              }
            }
          }
        })
      }
    },
    /**
     * @description: 获取用户列表
     * @description: 一进来就触发
     * @return {*}
     */
    getVerify() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.username,
        startTime: this.startTime,
        endTime: this.endTime,
        userStatus: this.selectUsers.useStatus,
        online: this.selectUsers.onlineStatus,
        role: this.selectUsers.role,
        status: 1
      }
      this.getAllusers(data)
    },
    /**
     * @description: 获取用户列表
     * @description: 切换页码
     * @return {*}
     */
    changepageNum(val) { // 切换页码时
      this.pageNum = val
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.username,
        startTime: this.startTime,
        endTime: this.endTime,
        userStatus: this.selectUsers.useStatus,
        online: this.selectUsers.onlineStatus,
        role: this.selectUsers.role,
        status: 1
      }
      this.getAllusers(data)
    },
    /**
     * @description: 获取用户列表
     * @description: 切换每页数据量
     * @return {*}
     */
    changePageSize(val) { // 切换页码时
      this.pageSize = val
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.username,
        startTime: this.startTime,
        endTime: this.endTime,
        userStatus: this.selectUsers.useStatus,
        online: this.selectUsers.onlineStatus,
        role: this.selectUsers.role,
        status: 1
      }
      this.getAllusers(data)
    },
    /**
     * @description: 获取用户列表
     * @description: 一进来就触发
     * @return {*}
     */
    getAllusers(params) {
      getUserList(params).then(res => {
        if (res.code === 200) {
          this.verifyData = res.data.data
          this.userCount = res.data.totalCount
          this.verifyData.forEach((item, index) => {
            item.index = (this.pageNum - 1) * this.pageSize + index + 1
            item.phonenum = item.phonenum === '0' ? '' : item.phonenum
            item.userStatus = item.userStatus === '0' ? '启用' : '禁用'
            item.online = item.online === '0' ? '在线' : '离线'
          })
        }
      })
    },
    /**
     * @description: 时间转化
     * @description: 转化成需要的格式
     * @return {*}
     */
    getonlineTime(ontime) {
      // console.log(this.startTime)
      const value = ontime
      // console.log(runningTime)
      if (value === 0) { // <1min
        return '--'
      } else if (value < 60) { // <1min
      // eslint-disable-next-line no-unused-vars
        const ss = value < 10 ? '0' + value : value
        // return '00:00:'+ss
        return '1分钟'
      } else if (value < 3600 && value >= 60) { // 1min~1hour
        // eslint-disable-next-line no-unused-vars
        let ss = value % 60
        let mm = parseInt(value / 60)
        ss = ss < 10 ? '0' + ss : ss
        mm = mm < 10 ? '0' + mm : mm
        return mm + '分钟'
      } else if (value < 86400 && value >= 3600) { // 1hour~24hour
        let hh = parseInt(value / 3600)
        const remainder = value % 3600
        let mm = parseInt(remainder / 60)
        // eslint-disable-next-line no-unused-vars
        let ss = remainder % 60

        hh = hh < 10 ? '0' + hh : hh
        mm = mm < 10 ? '0' + mm : mm
        ss = ss < 10 ? '0' + ss : ss
        return hh + '小时' + mm + '分钟'
      } else if (value >= 86400) { // >1day
        const day = parseInt(value / 86400)
        let remainder = value % 86400
        let hh = parseInt(remainder / 3600)
        remainder = remainder % 3600
        let mm = parseInt(remainder / 60)
        // eslint-disable-next-line no-unused-vars
        let ss = remainder % 60

        hh = hh < 10 ? '0' + hh : hh
        mm = mm < 10 ? '0' + mm : mm
        ss = ss < 10 ? '0' + ss : ss
        return day + '天 ' + hh + '小时' + mm + '分钟'
      } else {
        return ''
      }
    },
    /**
     * @description: 添加用户
     * @return {*}
     */
    addUser() {
      this.userDialog = true
    },
    /**
     * @description: 提交数据
     * @description: 点击确认触发
     * @return {*}
     */
    approveConfirm() {
      const that = this
      this.$refs['approveForm'].validate((valid) => {
        if (valid) {
          let role = ''
          for (let i = 0; i < that.roleOptions.length; i++) {
            if (that.roleOptions[i].value === that.approveForm.role) {
              role = that.roleOptions[i].label
            }
          }
          let team = 'key'
          if(role !=='企业管理员'){
            for (let item in that.employerOptions) {
              if (that.employerOptions[item].value === that.approveForm.employer) {
                team = that.employerOptions[item].key
              }
            }
          }
          const data = {
            username: that.approveForm.username,
            name: that.approveForm.name,
            roleIndex: that.approveForm.role,
            role: role,
            // duringDay: that.approveForm.useTime,
            userStatus: that.approveForm.useStatus,
            email: that.approveForm.email,
            password: that.approveForm.password,
            phonenum: that.approveForm.phone,
            company: that.approveForm.employer,
            team: team,
            status: 1
          }
          if (that.isEdit === false) {
            registUser(data).then(res => {
              if (res.code === 200) {
                that.getVerify()
                this.$Message.success('添加成功')
                that.handleReset()
              } else {
                this.$Message.error(res.message)
              }
            })
          } else {
            data.userId = that.approveForm.userId
            userUpdate(data).then(res => {
              if (res.code === 200) {
                that.getVerify()
                this.$Message.success('修改成功')
                that.handleReset()
                that.isEdit = false
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        } else {
          this.$Message.error({
            content: '表单验证失败',
            duration: 1.5
          })
        }
      })
    },
    /**
     * @description: 用户详情
     * @description: 点击详情触发
     * @return {*}
     */
    showVenify(item, i) {
      this.userDialog = true
      this.approveForm.userId = item.userId
      this.approveForm.username = item.username
      this.approveForm.name = item.name
      // this.approveForm.useTime = item.duringDay
      this.approveForm.useStatus = item.userStatus === '启用' ? '0' : '1'
      this.approveForm.email = item.email
      this.approveForm.password = item.password
      this.approveForm.checkPass = item.password
      this.approveForm.phone = item.phonenum
      this.approveForm.employer = item.company
      for (let i = 0; i < this.roleOptions.length; i++) {
        if (this.roleOptions[i].label === item.role) {
          this.approveForm.role = this.roleOptions[i].value
        }
      }
      this.isEdit = true
    },
    /**
     * @description: 删除用户
     * @description: 点击删除触发
     * @return {*}
     */
    deleteDate(item, i) {
      const data = {
        userId: item.userId
      }
      const that = this
      this.$Modal.confirm({
        title: '提示',
        content: '若删除当前用户则对应集群资源及部署应用也将删除。',
        okText: '确定',
        cancelText: '取消',
        closable: false,
        onOk() {
          userDelete(data).then(res => {
            if (res.code === 200) {
              debugger
              this.$Message.success('用户删除成功!')
              that.verifyData.splice(i, 1)
              that.getVerify()
              const currentCount = that.userCount - 1
              if (currentCount % 10 === 0) { // 所胜所有数据为10的倍数时
                that.pageNum = that.pageNum === 1 ? 1 : that.pageNum - 1
                that.getVerify()
              }
            } else {
              this.$Message.error('用户删除失败!')
            }
          })
        },
        onCancel() {
          console.log(1)
        }
      })
    },

    /* download() {
      tempDownload().then(([res, _filename]) => {
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const fileName = '数据模板' + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          // 释放内存
          window.URL.revokeObjectURL(link.href)
        }
      })
    }, */
    /**
     * @description: 下载用户
     * @description: 点击下载触发
     * @return {*}
     */
    downloadUser() { // 下载审核材料
      tempExport().then(([res, _filename]) => {
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const fileName = '所有用户' + '.xlsx'
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName)
        } else {
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          // 释放内存
          window.URL.revokeObjectURL(link.href)
        }
      })
    },

    /* closeUpload() {
      this.removefile()
      this.uploadData = false
    },

    uploadConfirm() {
      tempUpload(this.formData).then(res => {
        if (res.code === 200) {
          this.formData.delete('file')
          this.uploadData = false
          this.getVerify
          this.$message.success('上传成功')
        } else {
          (
            this.$message.error(res.message)
          )
        }
      })
    },

    handleUpload(file) {
      this.file = file
      console.log('上传的文件列表,', this.$refs.uploadFile.fileList)
      if (this.$refs.uploadFile.fileList.length > 0) {
        this.$Message.warning('最多只能上传1个文件!')
        return false
      }
      this.formData.append('file', this.file)
    },

    handleMaxSize(file) {
      this.$Notice.warning({
        title: '文件大小超过限制',
        desc: '文件 ' + file.name + ' 超出大小限制，最多10M。'
      })
      this.formData.delete('file')
    },

    // eslint-disable-next-line handle-callback-err
    flieError(error, file, fileLise) {
      this.error = true
      this.erroeFileName = fileLise.name
    },

    // 格式校验
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传xlsx格式的excel文件。'
      })
      this.formData.delete('file')
    },
    removefile(file) { // 文件移除
      this.formData.delete('file')
      this.$refs.uploadFile.clearFiles()
    }, */
    /**
     * @description: 选择开始时间
     * @return {*}
     */
    startTimeVal(val) { // 起始时间变化时
      this.startTime = val.toString()
      console.log('开始时间', val)
    },
    /**
     * @description: 选择结束时间
     * @return {*}
     */
    endTimeVal(val) { // 结束时间变化
      this.endTime = val.toString()
      console.log('结束时间', val)
    },
    /**
     * @description: 查询用户
     * @description: 点击查询触发
     * @return {*}
     */
    handleSubmit() { // 查询用户
      this.pageNum = 1
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        username: this.selectUsers.username,
        startTime: this.startTime,
        endTime: this.endTime,
        userStatus: this.selectUsers.useStatus,
        online: this.selectUsers.onlineStatus,
        role: this.selectUsers.role,
        status: 1
      }
      this.getAllusers(data)
    },
    /**
     * @description: 查询重置
     * @description: 点击重置触发
     * @return {*}
     */
    resetSearch() {
      this.selectUsers = {
        username: '',
        useStatus: 'null',
        onlineStatus: 'null',
        role: ''
      }
      this.startTime = null
      this.endTime = null
    },
    /**
     * @description: 表单重置
     * @description: 新增、修改
     * @return {*}
     */
    handleReset() {
      this.isEdit = false
      this.userDialog = false
      this.$refs['approveForm'].resetFields()
      this.approveForm = {
        userId: '',
        username: '',
        name: '',
        password: '',
        email: '',
        phone: '',
        employer: '',
        role: '',
        useTime: '30',
        useStatus: '0'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.permission-users-container {
  height: auto;
    padding: 16px;
  .updataButton{
    color:rgba(0, 145, 255, 1) !important ;
    background: rgba(217, 235, 255, 1) !important ;
    border: 1px solid rgba(0, 145, 255, 0.8);
    position: relative;
    right:30px
  }
}
</style>

<style lang="less" >
.permission-users-container {
 .ivu-table td, .ivu-table th {
     border-bottom: 0px solid #e8eaec !important;
}
    .ivu-table:before{content:'';width:100%;height:0px;position:absolute;left:0;bottom:0;z-index:1}
    .ivu-table:after{content:'';width:0px;height:100%;position:absolute;top:0;right:0;z-index:3}
}
</style>
